/*
 * CustomCheckBox : CheckBox 自定义复选框，继承自复选框
 */
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Controls.impl 2.14

CheckBox {
    id: checkBox

    /* property 定义开始 */
    // 复选框
    property string checkBoxText: "--CheckBox Default--"
    property bool isChecked: false // 默认不勾选
    property int boxSpacing: 5 // 文字和复选框间距

    // 框
    property int checkWidth: 21
    property int checkHeight: 21
    property bool isSquare: true // 默认为正方形框
    property int checkRadius: 2
    property int checkBorderWidth: 1
    property string checkBorderColor: "#FF2F42CD"
    property string checkBgColor: "transparent"

    // 文字
    property string checkBoxFontFamily: "Alibaba PuHuiTi"
    property int checkBoxFontPixelSize: 17
    property string checkBoxFontColor: "#FF222222"
    // 标签宽高
    property int checkBoxLabelWidth: 0
    property int checkBoxLabelHeight: 0

    // 勾
    property string tickColor: "#FFF" // 对号的颜色

    // 选中后
    property string checkedBorderColor: "#FF2F42CD" // 边框颜色
    property string checkedFillColor: "#FF2F42CD" // 填充颜色

    // 函数

    // 信号
    signal checkedSig(bool checked)
    /* property 定义结束 */

    checked: isChecked
    padding: 0

    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
                            implicitContentWidth + leftPadding + rightPadding); // 适应当前control宽
    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
                             implicitContentHeight + topPadding + bottomPadding,
                             implicitIndicatorHeight + topPadding + bottomPadding); // 适应当前control高


    // 打勾的框
    indicator: Rectangle {
        width: checkWidth
        height: isSquare ? checkWidth : checkHeight
        border.width: checkBorderWidth
        border.color: isChecked ? checkedBorderColor : checkBorderColor
        radius: checkRadius
        color: checkBgColor
        x: checkBox.leftPadding
        y: parent.height / 2 - height / 2

        // 填充和勾
        Item {
            id: fillNTick
            anchors.fill: parent
            state: "checked"

            // 填充
            Rectangle {
                anchors.fill: parent
                color: isChecked ? checkedFillColor : checkBgColor
                radius: checkRadius
            }

            // 勾
            ColorImage {
                anchors.fill: parent
                color: tickColor
                source: "qrc:/icons/tick.svg"
                visible: isChecked
            }

            states: [
                State {
                    name: "checked"
                    PropertyChanges {
                        target: fillNTick
                        opacity: 1.0
                    }
                },
                State {
                    name: "unchecked"
                    PropertyChanges {
                        target: fillNTick
                        opacity: 0.0
                    }
                }
            ]

            transitions: [
                Transition {
                    from: "checked"
                    to: "unchecked"
                    NumberAnimation {
                        properties: "opacity"
                        easing.type: Easing.InOutQuad
                        duration: 100
                    }
                },
                Transition {
                    from: "unchecked"
                    to: "checked"
                    NumberAnimation {
                        properties: "opacity"
                        easing.type: Easing.OutInQuad
                        duration: 100
                    }
                }
            ]
        }
    }

    // 文字
    contentItem: Text {
        id: checkBoxTextObj
        font.pixelSize: checkBoxFontPixelSize
        font.family: checkBoxFontFamily
        text: qsTr(checkBoxText)
        color: checkBoxFontColor
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignLeft
        leftPadding: checkBox.indicator.width + checkBox.boxSpacing
    }

    onCheckStateChanged: function(){
        if(checkBox.checkState === Qt.Checked) fillNTick.state = "checked"
        else fillNTick.state = "unchecked"
        isChecked = checked
        checkBox.checkedSig(checked)
    }
}
